<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['安装管理[环卫]', '设备维修记录']"
      icon="fa fa-newspaper-o"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>

  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>设备维修记录</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <sa-company-tree-car
                  companyTreeId="companyTree"
                  (companySelected)="companySelected($event)"
                  sourceCarUrl="carInfo/queryCarNumber.html"
                  typeFlag="8"
                ></sa-company-tree-car>
                <div class="top_module">
                  <span class="module_text">维修人</span>
                  <div class="s_hover_box" style="vertical-align: top">
                    <input
                      type="text"
                      placeholder="维修人"
                      class="module_inp top_module_select"
                      [(ngModel)]="tableParam.repairedUser"
                    />
                    <div class="s_del_icon" (click)="delRepairedUser()">x</div>
                  </div>
                </div>
                <div class="top_module top_module_box" style="min-width: auto">
                  <span class="top_module_label module_text">维修状态</span>
                  <select
                    name=""
                    class="top_module_select"
                    [(ngModel)]="tableParam.repairedStatus"
                    style="min-width: 110px"
                  >
                    <option value="">全部</option>
                    <option value="0">待维修</option>
                    <option value="1">已维修</option>
                  </select>
                </div>
                <div class="top_module top_module_box" style="min-width: auto">
                  <span class="top_module_label module_text">维修项目</span>
                  <select
                    name=""
                    class="top_module_select"
                    [(ngModel)]="tableParam.faultType"
                    style="min-width: 110px"
                    (change)="changeFaultType($event.target.value)"
                  >
                    <option value="">全部</option>
                    <option [value]="item.type" *ngFor="let item of faultTypeList">{{ item.typeName }}</option>
                  </select>
                </div>
                <div class="top_module top_module_box" style="min-width: auto" *ngIf="tableParam.faultType">
                  <span class="top_module_label module_text">故障类型</span>
                  <select
                    name=""
                    class="top_module_select"
                    [(ngModel)]="tableParam.subFaultType"
                    style="min-width: 110px"
                  >
                    <option value="">全部</option>
                    <option [value]="item.type" *ngFor="let item of subFaultTypeList">{{ item.typeName }}</option>
                  </select>
                </div>
                <div class="selectDate top_module">
                  <table-select-date [notInit]="true" (outerTime)="getSelectTableTime($event)"></table-select-date>
                </div>
                <!--<div class="selectDate top_module">
									<div class="input-daterange input-group s_selected_time_box s_hover_box">
										<input type="text" [(ngModel)]='startTime' class="form-control s_selected_time" id="datetimepicker3"  autocomplete="off" placeholder="选择开始时间"/>
										<span class="s_selected_time_spe">至</span>
										<input type="text" [(ngModel)]='endTime' class="form-control s_selected_time" id="datetimepicker4"  autocomplete="off" placeholder="选择结束时间"/>
										<div class="s_del_icon" (click)='del_date()'>x</div>
									</div>
								</div>-->
                <button class="btn btn-primary" (click)="table_search()">查询</button>
                <button class="btn btn-primary" (click)="table_export()">导出</button>
              </div>
              <!--<div class="right top-search">
								<input type="text" [(ngModel)]="tableParam.searchKey" (change)="table_search()" class="search-input" placeholder="维修人">
								<span class="top-search-box">
							        <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
							    </span>
							</div>-->
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>公司名称</th>
                    <th>车牌号码</th>
                    <th>设备ID</th>
                    <th>车型</th>
                    <th>维修项目</th>
                    <th>故障类型</th>
                    <th>安装时间</th>
                    <th>维修完成时间</th>
                    <th>维修人员</th>
                    <!--<th>维修费用[元]</th>-->
                    <th>维修状态</th>
                    <th>司机</th>
                    <th>司机电话</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i">
                    <td>{{ row.companyName }}</td>
                    <td>{{ row.carNumber }}</td>
                    <td>{{ row.deviceId }}</td>
                    <td>{{ row.useTypeL2 }}</td>
                    <td>{{ row.repairedItem }}</td>
                    <td>
                      <span class="subFaultTypeList">
                        {{ row.subFaultTypeList && row.subFaultTypeList.join(',') }}
                      </span>
                    </td>
                    <td>{{ row.inputDate }}</td>
                    <td>{{ row.finishedTime }}</td>
                    <td>{{ row.repairedUser }}</td>
                    <!--<td>
                                            <span>{{row.repairedFee/100}}</span>
                                            <button type="button" (click)="repairedMonkey(repairedMonkeyModal,row)">查看</button>
                                        </td>-->
                    <td>
                      <span *ngIf="row.repairedStatus == '0'" class="orange">待维修</span>
                      <span class="green">已维修</span>
                    </td>
                    <td>{{ row.driverName }}</td>
                    <td>{{ row.driverPhone }}</td>
                    <td>
                      <button type="button" (click)="repaireHistory(row, repairedDetailModal)">维修历史</button>
                      <button type="button" (click)="repairedDetailList(row)">明细</button>
                      <!--<button type="button" (click)="editRow(row)">编辑</button>-->
                      <button type="button" (click)="deleteRow(row)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!-- 维修明细 -->
  <div
    bsModal
    #repairedDetailModal="bs-modal"
    id="repairedDetailModal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg" style="width: 1000px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" aria-label="Close" (click)="closeRepairedDetail(repairedDetailModal)">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">维修明细</h4>
        </div>
        <div class="modal-body" style="padding: 15px">
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
            >
              <thead>
                <tr>
                  <th>维修时间</th>
                  <th>维修项目</th>
                  <th>故障类型</th>
                  <th>维修人员</th>
                  <!--<th>维修内容</th>-->
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let row of repairedDetailPage; let i = index">
                  <td>{{ row.createTime }}</td>
                  <td>{{ row.title }}</td>
                  <td>{{ row.subFaultTypeList && row.subFaultTypeList.join(',') }}</td>
                  <td>{{ row.operator }}</td>
                  <!--<td>{{row.repairedContent}}</td>-->
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 维修明细 end-->

  <!-- 维修费用明细 -->
  <div
    bsModal
    #repairedMonkeyModal="bs-modal"
    id="repairedMonkeyModal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg" style="width: 1000px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" aria-label="Close" (click)="closeRepairedMonkey(repairedMonkeyModal)">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">维修费用明细</h4>
        </div>
        <div class="modal-body" style="padding: 15px">
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
            >
              <thead>
                <tr>
                  <th>维修项目</th>
                  <!--<th>单价[元]</th>-->
                  <th>数量</th>
                  <th>总费用[元]</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let row of repairedMonkeyPage; let i = index">
                  <td>{{ row.title }}</td>
                  <!--<td>{{row.priceType==1?row.price/100:row.discountPrice/100}}</td>-->
                  <td>{{ row.count }}</td>
                  <td>{{ row.repairedFee }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 维修费用明细 end-->
</div>
<style type="text/css">
  .btn_ground .active {
    color: #1a6ddd;
    font-size: 16px;
    font-weight: bold;
  }
  .btn_color {
    background-color: #fff;
    margin-right: 12px;
    height: 24px;
    line-height: 24px;
    border: none;
    min-width: 46px;
    text-decoration: underline;
  }
  .btn_color:hover {
    color: #1a6ddd;
    font-size: 16px;
    font-weight: bold;
  }

  /* 弹出层 */
  .small_img_box {
    text-align: center;
    padding: 12px 0;
  }
  .picture {
    min-height: 100px;
    width: 100%;
    height: auto;
  }
  .img_desc .arrow {
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
    height: 80px;
    line-height: 80px;
    padding: 0 15px;
  }
  .img_desc .arrow.notAllow {
    cursor: not-allowed;
  }
  .small_img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    display: inline-block;
    border: 2px solid #ccc;
  }
  .small_img.active {
    border: 2px solid #1a6ddd;
  }
  .small_img:hover {
    border: 2px solid #1a6ddd;
  }
  .small_img .img {
    width: 100%;
    height: auto;
  }
  .radioSales {
    margin: 8px 8px 0 0;
    /* padding-top: 29px; */
    position: relative;
    top: 1px;
  }
</style>
